/* 课程实例卡片样式 */
.instanceCard {
  @apply transition-all duration-200 hover:shadow-md;
  border-radius: 8px;
}

.instanceCard.small {
  @apply text-sm;
}

.instanceCard.large {
  @apply text-base;
}

.cardTitle {
  @apply flex items-center gap-2;
}

.courseColorIndicator {
  @apply w-3 h-3 rounded-full flex-shrink-0;
}

.titleIcon {
  @apply text-blue-500 flex-shrink-0;
}

.courseName {
  @apply font-medium text-gray-900 flex-1 truncate;
}

.statusTag {
  @apply text-xs;
  margin: 0;
}

.cardContent {
  @apply space-y-2;
}

.infoRow {
  @apply flex items-center gap-1;
  font-size: inherit;
}

.label {
  @apply text-gray-600 flex-shrink-0;
}

.value {
  @apply text-gray-900 flex-1;
}

.studentIcon {
  @apply text-purple-500 flex-shrink-0;
}

.timeIcon {
  @apply text-orange-500 flex-shrink-0;
}

.locationIcon {
  @apply text-green-500 flex-shrink-0;
}

.sequenceNumber {
  @apply text-blue-600 font-medium mx-1;
}

.progress {
  @apply text-gray-500 text-xs ml-1;
}

.remarkRow {
  @apply flex flex-col gap-1 pt-2 border-t border-gray-100;
}

.remark {
  @apply text-gray-600 text-xs leading-relaxed;
  word-break: break-all;
}

.completeButton {
  @apply text-green-600 hover:text-green-700 hover:bg-green-50;
}

.makeupButton {
  @apply text-orange-600 hover:text-orange-700 hover:bg-orange-50;
}

/* 不同尺寸的样式调整 */
.instanceCard.small .cardContent {
  @apply space-y-1;
}

.instanceCard.small .infoRow {
  @apply text-xs;
}

.instanceCard.small .label {
  min-width: 32px;
}

.instanceCard.large .infoRow {
  @apply text-sm;
}

.instanceCard.large .label {
  min-width: 48px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .cardTitle {
    @apply flex-wrap;
  }
  
  .courseName {
    font-size: 13px;
  }
  
  .infoRow {
    font-size: 12px;
  }
  
  .label {
    min-width: 28px;
  }
}

/* 暗色主题支持 */
@media (prefers-color-scheme: dark) {
  .instanceCard {
    @apply bg-gray-800 border-gray-700;
  }
  
  .courseName {
    @apply text-gray-100;
  }
  
  .value {
    @apply text-gray-200;
  }
  
  .label {
    @apply text-gray-400;
  }
  
  .remark {
    @apply text-gray-400;
  }
  
  .remarkRow {
    @apply border-gray-700;
  }
  
  .sequenceNumber {
    @apply text-blue-400;
  }
  
  .progress {
    @apply text-gray-500;
  }
  
  .completeButton {
    @apply text-green-400 hover:text-green-300 hover:bg-green-900;
  }
  
  .makeupButton {
    @apply text-orange-400 hover:text-orange-300 hover:bg-orange-900;
  }
}